<template>
  <li class="battery" namea="battery">
    <div class="power-header-box">{{newAddAlternator.name}}</div>
    <div class = "isid" style="display: none">{{newAddAlternator.deviceid}}</div>
    <div class="power-content-box">
      <div class="power-content-left">采集状态:</div>
      <div class="power-content-right">
        <div class="device-status" :class="{device_status_active:alternatorAlarm['786432']}"></div>
      </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">工作状态</div>
      <div class="power-content-right">{{alternatorAlarm["786489"]}}</div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">本次发电量</div>
      <div class="power-content-right">{{alternatorAlarm["786446"]}} kWh</div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">累计发电量</div>
      <div class="power-content-right">{{alternatorAlarm["786447"]}} kWh</div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">本次运行时间</div>
      <div class="power-content-right">{{alternatorAlarm["786442"]}} hour</div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">累计运行时间</div>
      <div class="power-content-right">{{alternatorAlarm["786488"]}} hour</div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">累计启动次数</div>
      <div class="power-content-right">{{alternatorAlarm["786487"]}} 次</div>
    </div>

    <div class="power-content-box">
      <div class="power-content-left">报警数</div>
      <div class="power-content-right power-content-number">{{alternatorNum}}</div>
      <div v-show="alternatorNum==0?false:true" class="power-content-more"  @click="alternatorSee">查看</div>
    </div>
    <div class="batterybtn" @click="alternatorMore">
      更多
    </div>
  </li>
</template>

<script>
    export default {
        name: "newAddAlternator"
    }
</script>

<style scoped>
  .power-content-box{
    width: 180px;
    height: 25px;
    overflow: hidden;
    background: #fff;
    border-bottom:1px solid #ebeef5;
    position: relative;
  }
  .power-content-box:hover{
    background: #f5f7fa;
    cursor: pointer;
  }
  .power-content-left{
    float: left;
    width: 100px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
  }
  .power-content-right{
    float: left;
    width: 70px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
  }
  .power-content-box .power-content-number{
    font-size: 14px;
    font-weight: 600;
    color: red;
  }
  .power-content-more{
    float: left;
    width: auto;
    font-size: 12px;
    position: absolute;
    right: 5px;
    top: 4px;
  }
  .power-content-more:hover{
    color: red;
    cursor: pointer;
  }

  .device-status{
    width:13px;
    height:13px;
    border-radius: 50%;
    background: #13ce66;
    box-shadow: 2px 2px 3px #bfbeb8;
    margin: auto;
    margin-top: 5px;
  }
  .device_status_active{
    background: #ff4949;
  }
</style>
